<script setup lang="ts">
import VChart from 'vue-echarts'
import { useChartToolboxDataView } from '@/mixins/MixinChartToolboxDataView'
import { useChartTooltipTheme, useChartTooltipAxisPointerLineStyle } from '@/mixins/MixinChartTooltipTheme'

defineOptions({ name: 'ElectricQualityAnalysisLineCharts' })

const props = defineProps<{
  data: any[]
  name: string
}>()

const {
  dataView,
} = useChartToolboxDataView(() => ({
  dataViewFirstCellName: '时间',
  optionToContent: (opt: any, g: (d: any[]) => string | HTMLElement) => {
    const source = (opt.dataset[0]?.source || []) as any[]
    let result: any[] = []
    if (source.length > 0) {
      const head = source[0] || []
      const body = source.slice(1) || []
      result = [
        ['时间', ...body.map(v => v[0])],
        ...head.slice(1).map(((v: any, i: number) => {
          return [v, ...body.map(vv => vv.slice(1)[i] ?? '-')]
        })),
      ]
    }
    return g(result)
  },
}))
const tooltipTheme = useChartTooltipTheme()
const chartOption = computed(() => {
  return {
    title: {
      show: false,
      text: props.name,
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal',
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        ...useChartTooltipAxisPointerLineStyle(),
      },
      ...tooltipTheme,
    },
    legend: {
      bottom: 20,
      left: 'center',
      type: 'scroll',
      pageButtonGap: 10,
    },
    grid: {
      top: 40,
      left: '2%',
      right: '2%',
      bottom: 110,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    dataZoom: [
      // { type: 'inside' },
      // { type: 'inside' },
      { type: 'slider', height: '20px', bottom: '66px' },
      { type: 'inside' },
    ],
    series: [
      ...Array.from({ length: props.data.length - 1 }).map(() => ({
        type: 'line',
        smooth: false,
        lineStyle: {
          width: 1,
        },
        seriesLayoutBy: 'row',
        // stack: 'total',
        emphasis: {
          focus: 'series',
        },
      })),
    ],
    toolbox: {
      show: true,
      top: 0,
      right: 'center',
      feature: {
        magicType: {
          type: ['bar', 'line'],
          option: {
            line: {
              smooth: false,
            },
          },
        },
        dataView: unref(dataView),
      },
    },
    dataset: {
      source: props.data || [],
    },
  }
})

const { theme } = storeToRefs(useDesignStore())
</script>

<template>
  <VChart
    :option="chartOption" :init-options="{
      locale: 'zh',
    }" :theme="theme"
  />
</template>
